<template>
  <div class="login d-flex justify-center align-center">
    <v-card color="basil" max-width="500" min-width="300">
      <v-img
        lazy-src="http://h2.ioliu.cn/bing/RainbowMarmot_ZH-CN4605973404_1920x1080.jpg"
        src="http://h2.ioliu.cn/bing/RainbowMarmot_ZH-CN4605973404_1920x1080.jpg"
      ></v-img>

      <v-card color="basil" flat>
        <form>
          <v-text-field
            v-model="username"
            label="username"
            required
          ></v-text-field>
          <v-text-field
            v-model="password"
            label="password"
            required
          ></v-text-field>

          <v-checkbox
            v-model="checkbox"
            label="记住密码"
            required
            @change="touch()"
            @blur="touch()"
          ></v-checkbox>

          <v-btn class="mr-4" @click="submit"> 登陆 </v-btn>
        </form>
      </v-card>
    </v-card>
  </div>
</template>

<script>
import api from "../../axios/api";
export default {
  data: () => {
    return {
      items: ["登陆"],
      username: "",
      password: "",
      checkbox: "",
    };
  },
  methods: {
    touch() {},
    submit() {
      api
        .login({ username: this.username, password: this.password })
        .then((res) => {
          console.log(res);
          if (res.code !== 0) {
            sessionStorage.setItem("token", res.token);
            this.$router.push(`/`);
          }
        })
        .catch((e) => {
          console.error(e);
          alert("登陆失败，请检查用户名密码");
        });
    },
  },
};
</script>

<style  scoped>
.login {
  height: 100vh;
  width: 100%;
}
/* Helper classes */
.basil {
  margin: 26px;
}
.basil--text {
  color: #356859 !important;
}
</style>